<template>
  <q-dialog v-model="showDialog" persistent>
    <q-card :dark="dark" flat class="main-block-with-cropped relative-position">
      <q-card-section class="row items-center">
        <div class="flex justify-between full-width">
          <q-avatar
            icon="report_problem"
            color="transparent"
            text-color="primary"
          />

          <div class="cursor-pointer row items-center" @click="resetForm()">
            <q-icon
              tag="i"
              name="close"
              color="primary"
              :left="false"
              :right="false"
              :size="$q.screen.gt.xs ? '32px' : '20px'"
            >
            </q-icon>
          </div>
        </div>
        <h4 class="q-my-none">
          Опишите возникшую проблему. Если хотите, оставьте адрес для обратной
          связи.
        </h4>
      </q-card-section>
      <q-card-section class="row items-center">
        <q-form ref="queryForm" @submit="sendForm" style="width: 100%">
          <q-input
            v-model="description"
            :error="false"
            :hide-bottom-space="false"
            :rules="[
              (val) => (val && val.length > 0) || 'Введите суть проблемы',
            ]"
            color="grey-8"
            input-class=" input-style-grey "
            label="У меня следующая проблема:"
            label-color="grey-8"
            lazy-rules
            autogrow
          />
          <q-input
            v-model="contact"
            :error="false"
            :hide-bottom-space="false"
            color="grey-8"
            fill-mask
            input-class=" input-style-grey"
            label="Как в вами связаться? Оставьте любой контакт. Это необязательно"
            label-color="grey-8"
            autogrow
          />
          <q-btn
            :label="formButtonLabel"
            class="button-style main-block-with-cropped"
            flat
            style="width: 100%"
            type="submit"
          ></q-btn>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
<script>
import { sendYMgoal } from "src/utils/yandex_metrika_utils";
import { mapActions, mapState } from "pinia";
import { useUiStore } from "src/stores/UI";
import { useAuthStore } from "src/stores/auth";
import axios from "axios";
import fetch from "cross-fetch";

export default {
  name: "CallbackDialog",
  components: {},
  computed: {
    ...mapState(useUiStore, ["dark"]),
    ...mapState(useUiStore, { imgLoading: "getImageLoadingMode" }),
    showDialog: {
      get: function () {
        return this.showCallbackDialog ?? false;
      },
      set: function (payload) {
        this.$emit("update:showCallbackDialog", payload);
      },
    },
  },
  props: {
    showCallbackDialog: { type: Boolean, default: false },
    formButtonLabel: { type: String, default: "Отправить" },
  },
  emits: ["update:showCallbackDialog"],

  data() {
    return {
      description: "",
      contact: "",
    };
  },

  methods: {
    resetForm() {
      this.description = "";
      this.contact = "";
      this.$emit("update:showCallbackDialog", false);
    },
    sendForm() {
      this.$refs.queryForm.validate().then((success) => {
        if (success) {
          const url = "https://universo.pro/bot/api/issue";
          const token = process.env.TELEGRAM_SUPPORT_BOT_TOKEN;

          const instance = axios.create({
            baseURL: url,
            timeout: 1000,
            headers: {
              Authorization: `Bearer ${token}`,
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*",
            },
          });

          instance
            .post("/", {
              description: this.description,
              context: { contact: this.contact, path: this.$route.path },
            })
            .then((response) => {
              console.log(response);

              if (response?.data?.success) {
                this.resetForm();
                this.$q.notify({
                  type: "positive",
                  position: "center",
                  message: "Запрос отправлен. Спасибо.",
                });
              } else {
                this.$q.notify({
                  type: "negative",
                  position: "center",

                  message: response?.data?.error_description,
                });
              }
            })
            .catch((error) => {
              console.log("error", error);
              this.$q.notify({
                type: "negative",
                position: "center",

                message: "Что-то пошло не так...",
              });
            });
        }
      });

      this.$refs.queryForm.resetValidation();
    },
  },

  setup() {
    return {};
  },
};
</script>
<style lang="sass" scoped>
@media (max-width: $breakpoint-md-max)
</style>
<style lang="sass">
.my-dialog .q-dialog__backdrop
  // background: rgba(56, 38, 89, 0.9)
</style>
<style scoped>
h4 {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  color: #382659;
  line-height: normal;
}
.button-style {
  background: #0fab9d;
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  line-height: 28px;

  text-align: center;
  letter-spacing: 0.1em;
  color: #ffffff;
  height: 60px;
  width: 468px;
}
</style>
<style lang="sass" scoped>
.caption-style
  font-size: 12px
  margin-top: -12px
  font-weight: 400
  text-align: center
  letter-spacing: 0.05em
  color: grey
  width: 100%

@media (max-width: $breakpoint-md-max)
  .button-style
    width: 100%
  .caption-style
    width: 100%

.link-style
  font-weight: 500
  color: #2D2828
  text-decoration: none
  border-bottom: 1px dotted
</style>
<style lang="sass">
.input-style-grey
  font-style: normal
  font-weight: bold
  font-size: 20px
  line-height: 30px
  color: $grey-8
  border-bottom: $grey-8

@media (max-width: $breakpoint-md-max)
  .input-style-grey
    font-size: 16px
    line-height: 20px
</style>
